<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}">五子棋游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #board {
            display: grid;
            grid-template-columns: repeat(19, 30px);
            grid-template-rows: repeat(19, 30px);
            gap: 0;
            border: 2px solid #333;
            background-color: #d8b595;
        }

        .cell {
            width: 30px;
            height: 30px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            position: relative;
        }

        .stone {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            position: absolute;
            top: 1px;
            left: 1px;
        }

        .black {
            background-color: #000;
        }

        .white {
            background-color: #fff;
        }

        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        #status {
            margin-top: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div id="board"></div>
<div>
    <p id="status" th:text="'当前玩家: ' + (${currentPlayer} == 1 ? '黑棋' : '白棋')">当前玩家: 黑棋</p>
    <button id="newGame" th:text="${buttonText}">新游戏</button>
</div>

<script>
    const boardElement = document.getElementById('board');
    const newGameButton = document.getElementById('newGame');
    const statusText = document.getElementById('status');

    const BOARD_SIZE = 19;
    let gameBoard = Array.from({ length: BOARD_SIZE }, () => Array(BOARD_SIZE).fill(0)); // 初始化棋盘
    let currentPlayer = [[${currentPlayer}]]; // 当前玩家（从后端获取）

    function drawBoard() {
        boardElement.innerHTML = ''; // 清空棋盘
        for (let row = 0; row < BOARD_SIZE; row++) {
            for (let col = 0; col < BOARD_SIZE; col++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.row = row;
                cell.dataset.col = col;

                // 根据棋盘状态渲染棋子
                if (gameBoard[row][col] === 1) {
                    const stone = document.createElement('div');
                    stone.classList.add('stone', 'black');
                    cell.appendChild(stone);
                } else if (gameBoard[row][col] === 2) {
                    const stone = document.createElement('div');
                    stone.classList.add('stone', 'white');
                    cell.appendChild(stone);
                }

                // 绑定点击事件
                cell.addEventListener('click', handleCellClick);
                boardElement.appendChild(cell);
            }
        }
    }

    function handleCellClick(event) {
        const row = parseInt(event.target.dataset.row);
        const col = parseInt(event.target.dataset.col);

        // 检查当前位置是否为空
        if (gameBoard[row][col] !== 0) return;

        // 更新棋盘状态
        gameBoard[row][col] = currentPlayer;

        // 创建棋子并添加到 DOM
        const stone = document.createElement('div');
        stone.classList.add('stone', currentPlayer === 1 ? 'black' : 'white');
        event.target.appendChild(stone);

        // 检查胜负
        if (checkWin(row, col, currentPlayer)) {
            statusText.textContent = `${currentPlayer === 1 ? '黑棋' : '白棋'} 获胜！`;
            disableBoard();
        } else if (isBoardFull()) {
            statusText.textContent = '平局！';
        } else {
            // 切换玩家
            currentPlayer = currentPlayer === 1 ? 2 : 1;
            statusText.textContent = `当前玩家: ${currentPlayer === 1 ? '黑棋' : '白棋'}`;
        }
    }

    function checkWin(row, col, player) {
        // 检查水平、垂直和对角线方向是否有连续的五个相同的棋子
        return checkLine(row, col, player, 1, 0) || // 水平
            checkLine(row, col, player, 0, 1) || // 垂直
            checkLine(row, col, player, 1, 1) || // 主对角线
            checkLine(row, col, player, 1, -1);  // 副对角线
    }

    function checkLine(row, col, player, dRow, dCol) {
        let count = 1;
        for (let i = 1; i < 5; i++) {
            if (getCellValue(row + i * dRow, col + i * dCol) !== player) break;
            count++;
        }
        for (let i = 1; i < 5; i++) {
            if (getCellValue(row - i * dRow, col - i * dCol) !== player) break;
            count++;
        }
        return count >= 5;
    }

    function getCellValue(row, col) {
        if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE) return 0; // 超出边界视为空
        return gameBoard[row][col];
    }

    function isBoardFull() {
        for (let row of gameBoard) {
            for (let cell of row) {
                if (cell === 0) return false;
            }
        }
        return true;
    }

    function resetGame() {
        gameBoard = Array.from({ length: BOARD_SIZE }, () => Array(BOARD_SIZE).fill(0));
        currentPlayer = [[${currentPlayer}]];
        statusText.textContent = `当前玩家: ${currentPlayer === 1 ? '黑棋' : '白棋'}`;
        drawBoard();
    }

    function disableBoard() {
        const cells = document.querySelectorAll('.cell');
        cells.forEach(cell => cell.removeEventListener('click', handleCellClick));
    }

    newGameButton.addEventListener('click', resetGame);
    drawBoard(); // 初始化棋盘
</script>
</body>
</html>